import React, {Component} from 'react';

require('./css/frame.css');
let timer;
const quiz = [
    {
        qwd: '手机众智APP与车机可通过哪些方式连接？',
        word: ['USB连接', '手机热点', 'WLAN无线', '手机蓝牙'],
        ans: 'BC',
        single: 'mult',
        index: 4,
        key:0,
    },
    {
        qwd: '手机众智APP可实现哪些功能？',
        word: ['地址信息发送', '地图更新', '手机导航至爱车位置', '停车位置导航至目的地'],
        ans: 'ABD',
        single: 'mult',
        index: 8,
        key:1,
    },
];

export default class P9 extends Component {
    constructor(props){
        super(props);
        this.state={
            flag:[1,0],
            initCho:[
                [0,0,0,0],
                [0,0,0,0],
            ],
            ans:['0_1_1_0','1_1_0_1'],
            check:['检查','检查'],
            checkClass:['check','check'],
        }
        this.anflag=[0,0];
    }

    goQuiz(){
        this.setState({
            flag:[0,1]
        })
    }

    onCho(str){
        let flag=str.split('_');
        let i=flag[0];
        let j=flag[1];
        let initCho=this.state.initCho;

        initCho[i][j] = (initCho[i][j] === 0 ) ?1 :0 ;
        this.setState({initCho});
    }

    onCheck(i){
        let cmp=this;
        let { check ,checkClass,initCho} = this.state;
        if(this.state.initCho[i].join("_") === this.state.ans[i] ){
            check[i] = '正确';
            checkClass[i] ='check_r';
            this.props.setAnflag(i);
        }else{
            check[i] = '错误';
            checkClass[i] ='check_w'
        }
        this.setState({
            checkClass,
            check
        });
        timer=setTimeout(function(){
            check=['检查','检查'];
            checkClass=['check','check'];
            initCho=[
                [0,0,0,0],
                [0,0,0,0],
            ];
            cmp.setState({
                checkClass,
                check,
                initCho,
            });
        },3000);
    }

    render() {
        const { flag,initCho ,check ,checkClass} = this.state;
        return (
            <div id="page">
                <div className="content" id="box9">
                    <h4 className="title">课程测试</h4>
                    {flag[0] ===1 && <div id="q1">
                        <div id="conts">
                            <p style={{"fontWeight": "bold"}}> 本课程我们学习了全新一代宝来 众智APP，你都记住了吗？</p>
                            <ul className="menuul">
                                <li>众智APP产品介绍</li>
                                <li>手机、车机连接</li>
                                <li>地址发送</li>
                                <li>步行导航</li>
                                <li>地图更新</li>
                                <li>我的行程</li>
                            </ul>
                        </div>
                        <p id="goquiz" onClick={this.goQuiz.bind(this)}>开始测试 </p>
                    </div> }

                    { flag[1] ===1 && quiz.map( (item,i) =>{
                        return (
                            <div className="cho" id={`cho${i}`}>
                                <p className="qword" id="qword0">{item.qwd}</p>
                                <ul id={`list${i}`} className="list">
                                    {
                                        item.word.map( (obj,k)=>{
                                            let str=i+'_'+k;
                                            let on_off=(initCho[i][k] ==1 ) ? "quizbtns_on": "quizbtns_off";
                                            return (
                                                <li>
                                                    <span className={on_off}
                                                          onClick={this.onCho.bind(this,str)}></span>
                                                    <span>{obj}</span>
                                                </li>
                                            )
                                        })
                                    }
                                </ul>
                                <div className={checkClass[i]} id='check0' onClick={this.onCheck.bind(this,i)}>{check[i]}</div>
                            </div>
                        )

                })}
            </div>
        </div>
        );
    }
}


